<script setup lang="ts">
import { formatNumber } from '@/home/utils/format';

const props = defineProps<{
  title?: string;
  num?: number;
  iconClass?: string;
  numClass?: string;
  hover?: boolean;
}>();

const emit = defineEmits(['click']);
</script>

<template>
  <div class="group relative size-48 flex flex-col items-center justify-center b-1 b-white rounded-full from-gray-2 to-white bg-gradient-to-b shadow-[0_1px_6px_0_rgba(0,0,0,0.06)]">
    <button type="button" :title="props.title" class="size-full flex-center rounded-full bg-transparent" @click="emit('click')">
      <div class="size-18 group-hover:(c-text-1)" :class="props.iconClass"></div>
    </button>
    <div v-if="props.num !== undefined" :class="['absolute left-33 top-0 h-18 min-w-18 flex items-center justify-center rounded-full pl-4 pr-4', props.numClass]">
      <p class="select-none text-12 c-white font-400 leading-14">{{ formatNumber(props.num) }}</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
